<template>
  <div>
    李锦鹤
    <el-card>
      <el-row style="margin-bottom:10px" v-if="Boolean($route.query.id)">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>学科管理</el-breadcrumb-item>
          <el-breadcrumb-item>{{$route.query.name}}</el-breadcrumb-item>
          <el-breadcrumb-item>标签管理</el-breadcrumb-item>
        </el-breadcrumb>
      </el-row>
      <page-tool>
        <div slot="before">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="标签名称" class="biaoqianName">
              <el-input v-model="dataList.tagName">
              </el-input>
            </el-form-item>
            <el-form-item label="状态">
              <el-select placeholder="请选择" v-model="dataList.state">
                <el-option label="启用" value="1"></el-option>
                <el-option label="禁用" value="0"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button @click="onclear">清除</el-button>
              <el-button type="primary" @click="getList">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div slot="after">
          <span @click="$router.back()" style="color:#409eff;margin-right:10px" v-if="Boolean($route.query.id)"><i
              class="el-icon-back"></i>返回学科</span>
          <el-button type="success" icon="el-icon-edit" @click="getCateList">新增标签</el-button>
        </div>
      </page-tool>
      <el-alert class="el-icon-info" :title="`数据一共${counts}条`" type="info" :closable="false">
      </el-alert>
      <el-table :data="list">
        <el-table-column type="index" label="序号" width="48">
        </el-table-column>
        <el-table-column prop="subjectName" label="所属学科">
        </el-table-column>
        <el-table-column prop="tagName" label="标签名称">
        </el-table-column>
        <el-table-column prop="username" label="创建者">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期">
          <template slot-scope="scope">
            {{ scope.row.addDate | parseTimeByString }}
          </template>
        </el-table-column>
        <el-table-column prop="state" label="状态">
          <template slot-scope="{row}">
            <span v-if="row.state === 1">已启用</span>
            <span v-else>已禁用</span>
          </template>
        </el-table-column>
        <el-table-column prop="" label="操作">
          <template slot-scope="scope">
            <el-button type="text" @click="chang(scope.row)">{{
                scope.row.state === 1 ? "禁用" : "启用"
              }}</el-button>
            <el-button type="text" :disabled="scope.row.state === 1 ? false : true" @click="modificationBtn(scope.row)">
              修改</el-button>
            <el-button type="text" :disabled="scope.row.state === 1 ? false : true" @click="removeBtn(scope.row.id)">
              删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" background
        :page-sizes="[5, 10, 20, 50]" layout="prev, pager, next, sizes, jumper" :total="counts"
        :paginationPagesize="list.pagesize" :paginationPage="list.page">
      </el-pagination>
    </el-card>
    <!-- 新增标签弹出框 -->
    <el-dialog title="新增标签" :visible.sync="addCateDiaLogViSible" class="addDialog" width="21%" @close='addCancel'>
      <el-form :model="addForm" label-width="80px" :rules='addCateFormRures' ref="addFormRef">
        <el-form-item label="所属学科" v-if="!$route.query.id">
          <el-select v-model="addForm.subjectID" placeholder="请选择" class="tnInput">
            <el-option v-for="items in xueke" :key="items.value" :label="items.label" :value="items.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称" prop="tagName">
          <el-input v-model="addForm.tagName" autocomplete="off" class="tnInput" placeholder="请输入标签名称"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addCancel">取 消</el-button>
        <el-button type="primary" @click="addBtn">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 新增标签弹出框 -->
    <!-- 修改对话框 -->
    <el-dialog title="修改标签" :visible.sync="editCateDiaLogViSible" class="addDialog" width="21%" @close='editCancel'>
      <el-form :model="editForm" label-width="80px" ref="editFormRef">
        <el-form-item label="所属学科" v-if="!$route.query.id">
          <el-select v-model="editForm.subjectID" placeholder="请选择" class="tnInput">
            <el-option v-for="items in xueke" :key="items.value" :label="items.label" :value="items.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="标签名称">
          <el-input v-model="editForm.tagName"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="editCancel">取 消</el-button>
        <el-button type="primary" @click="editBtn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { list, add, update, remove, changeState } from '@/api/hmmm/tags.js'
import { simple as lise } from '@/api/hmmm/subjects'

export default {
  name: 'tags',
  data () {
    return {
      list: [],
      dataList: {
        page: 1,
        pagesize: 10,
        tagName: '',
        state: null
      },
      counts: 0,
      xueke: [],
      // 控制新增目录的显示
      addCateDiaLogViSible: false,
      // 控制修改对话框的显示
      editCateDiaLogViSible: false,
      //  添加目录验证规则
      addCateFormRures: {
        tagName: [
          { required: true, message: '请输入目录名称', trigger: 'blur' }
        ]
      },
      addForm: {
        subjectID: '',
        tagName: ''
      },
      editForm: {
        id: '',
        subjectID: '',
        tagName: ''
      }
    }
  },
  methods: {
    // 获取标签列表
    async getList () {
      const { data: res } = await list(this.dataList)
      // console.log(res)
      this.list = res.items
      this.counts = res.counts
    },
    // 监听pagesize改变事件
    handleSizeChange (newSize) {
      this.dataList.pagesize = newSize
      this.getList()
    },
    handleCurrentChange (newpage) {
      this.dataList.page = newpage
      this.getList()
    },
    // 清除按钮
    onclear () {
      this.dataList.tagName = null
      this.dataList.state = null
      this.getList()
    },
    // 新增标签按钮弹出对话框
    async getCateList () {
      const { data } = await lise()
      // console.log(data)
      this.addCateDiaLogViSible = true
      this.xueke = data
      // console.log(this.xueke)
    },
    // 添加的确定按钮
    async addBtn () {
      // console.log(this.addForm)
      try {
        if (this.$route.query) {
          await add({ ...this.addForm, subjectID: this.$route.query.id * 1 })
        } else {
          await add(this.addForm)
        }
        this.$message.success('添加成功！')
        this.addCateDiaLogViSible = false
        this.getList()
      } catch (err) {
        this.$message.error('添加失败')
      }
    },
    // 添加的取消按钮
    addCancel () {
      this.addCateDiaLogViSible = false
      this.$refs.addFormRef.resetFields()
    },
    // 切换状态
    async chang (row) {
      if (row.state === 0) {
        row.state = 1
        this.$message.success('启用成功')
      } else {
        row.state = 0
        this.$message.success('禁用成功')
      }
      await changeState({ id: row.id, state: row.state })
      this.getList()
    },
    // 弹出修改对话框
    async modificationBtn (row) {
      // console.log(row)
      const { data } = await lise()
      this.xueke = data
      // console.log(this.xueke)
      this.editForm = { ...row }
      this.editCateDiaLogViSible = true
    },
    // 修改对话框的确定按钮
    async editBtn () {
      let data = null
      console.log(this.editForm.subjectID)
      if (this.$route.query.id) {
        data = await update({
          id: this.editForm.id,
          subjectID: this.$route.query.id * 1,
          tagName: this.editForm.tagName
        })
      } else {
        data = await update({
          id: this.editForm.id,
          subjectID: this.editForm.subjectID,
          tagName: this.editForm.tagName
        })
      }

      if (data.status !== 200) {
        return this.$message.error('修改失败')
      }
      this.$message.success('修改成功')
      this.getList()
      this.editCateDiaLogViSible = false
    },
    // 修改对话框的取消按钮
    editCancel () {
      this.$refs.editFormRef.resetFields()
      this.editCateDiaLogViSible = false
    },
    // 删除按钮
    removeBtn (id) {
      this.$confirm('此操作将永久删除该标签, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          await remove({ id })
          this.getList()
          this.$message({
            type: 'success',
            message: '删除成功!'
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    }
  },
  computed: {

  },
  watch: {},
  filters: {},
  components: {},
  created () {
    if (this.$route.query) {
      this.dataList = { subjectID: this.$route.query.id, page: 1, pagesize: 10 }
      this.getList()
    } else {
      this.getList()
    }
  },
  mounted () { }
}
</script>

<style scoped lang='less'>
.el-table {
  position: relative;
  overflow: hidden;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  flex: 1;
  width: 100%;
  max-width: 100%;
  font-size: 14px;
  color: #606266;
}
.el-card {
  border: 1px solid #ebeef5;
  background-color: #fff;
  color: #303133;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  padding-bottom: 12px;
  margin: 10px;
}
.el-pagination {
  margin-top: 15px;
  float: right;
}
.el-form-item__label {
  font-size: 14px;
}

.el-alert {
  margin: 14px 0;
}
.tnInput {
  // width: 217px;
  width: 280px;
}
.biaoqianName {
  margin: 0 40px 0 10px;
}
.el-breadcrumb {
  font-size: 14px;
  padding: 18px 0;
  border-bottom: 1px solid #ebeef5;
}
</style>
